<template>
  <div class="SetDialog">
    <el-dialog
      v-model="options.isShow"
      :title="options.title"
      width="30%"
      center
      destroy-on-close
      :close-on-click-modal="false"
      :before-close="handleCloseClick"
    >
      <section class="propCls">
        <el-form ref="formRef" :model="formData" :rules="rules">
          <el-form-item label="原密码:" prop="password" label-width="80">
            <el-input
              v-model.trim="formData.password"
              placeholder="请输入原密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item label="新密码:" prop="newPassword" label-width="80">
            <el-input
              v-model.trim="formData.newPassword"
              placeholder="请输入新密码"
              type="password"
              show-password
            />
          </el-form-item>
        </el-form>
      </section>

      <section>
        <div class="model-footer">
          <el-button @click="handleClearClick">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">确定</el-button>
        </div>
      </section>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { isCode } from '@/utils/iscode'
import useOptStore from '@/stores/main/opt/opt'
import { postPasswordApi } from '@/service/api'

const optStore = useOptStore()
const props = defineProps<{ options: any }>()

const emits = defineEmits(['logout'])

const rules = reactive<FormRules>({
  password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
})

const formRef = ref<FormInstance>()
const formData = ref<any>({})
const handleClearClick = () => {
  formRef.value?.resetFields()
  props.options.isShow = false
}

const handleConfirmClick = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      let res = await postPasswordApi(formData.value)
      if (isCode(res, true)) {
        handleClearClick()
        emits('logout')
      }
    }
  })
}
const handleCloseClick = (done: () => void) => {
  handleClearClick()
  done()
}
</script>

<style lang="less" scoped>
.SetDialog {
  .propCls {
    .el-form-item {
      margin-bottom: 30px;
    }
  }
  .model-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 35px;
    margin-top: 30px;
    .el-button {
      padding: 0 20px;
    }
  }
  .fishingProp {
    background-color: #f7fafd;
  }
  .selectCls {
    margin-top: 20px;
    .propItem {
      padding: 5px 10px;
      margin-right: 20px;
      background-color: #f7fafd;
    }
  }
}
</style>
